/* eslint-disable semi */
/* eslint-disable semi */
/* eslint-disable quotes */
<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="banner" ref="scroll">
      <!-- 轮播图 -->
      <div id="topBanner" class="hello-1">
        <van-swipe :autoplay="3000" @change="onChange">
          <van-swipe-item v-for="(item, index) in bannerimages" :key="index">
            <img :src="item.imgSrc" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 页中分类 -->
      <div class="hello-2">
        <div class="hello-2-1" v-for="(item, index) in listimages" :key="index">
          <div>
            <!-- <router-link v-if="item.id !=3" :to="item.link"> -->
            <van-image class="hello-2-one" :src="item.imgSrc" @click="showToast(item.id,item.link)" />
            <!-- </router-link> -->

            <p class="hello-2-two">{{item.Name}}</p>
          </div>
        </div>
      </div>

      <!-- 中间秒杀图片 -->
      <div class="hello-3" v-for="(item, index) in middleimages" :key="index" @click="showToast('3','')">

        <van-image width="100%" height="2.433rem" :src="item.imgSrc" />

      </div>

      <!-- 金猪列表 -->

      <van-list class="help-son" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="hello-4" v-for="(itemlist, index) in Piglist" :key="index" :class="[itemlist.id !=0? 'gray':'']"
          @click="showDetails(itemlist.id)">
          <div class="hello-4-top" :class="[itemlist.id !=0? 'onlygray':'']">
            <div class="hello-4-top-left">
              <img :src="itemlist.imgSrc" alt />
            </div>
            <div class="hello-4-top-right">
              <p class="pig" :class="[itemlist.id !=0? 'gray':'']">{{itemlist.Pig}}</p>
              <div class="secend">
                <van-tag class="date">{{itemlist.Date}}</van-tag>
                <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']"
                  v-if="itemlist.bonus_type==1">认养
                </van-tag>
                <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']"
                  v-else-if="itemlist.bonus_type==2">产品</van-tag>

                <van-tag class="recive" color="#FFBA68" :class="[itemlist.stock !=0?'':'gray']" v-else>认养</van-tag>
              </div>
            </div>
            <div class="hello-4-top-last" :class="[itemlist.id !=0? '':'close']">
              <img :src="itemlist.imgSrcover" alt />
            </div>
          </div>
          <div class="hello-4-bottom">
            <div class="show-one">
              <div class="show-one-1">
                <h4>{{itemlist.Percentage}}</h4>
                <p class="color-2">认养分红</p>
              </div>
              <div class="show-one-2">
                <h4>{{itemlist.Money}}</h4>
                <p class="color-2 adddistance">金额(元/头)</p>
              </div>
              <div class="show-one-3">
                <h4 id="show-num">{{itemlist.Month}}</h4>
                <p class="color-2">期限(月)</p>
              </div>
            </div>
            <div class="length">

              <van-progress color="#75DEA7" :percentage="itemlist.Schedule" style="height: 0.213rem;" />
            </div>
          </div>
        </div>
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
      </van-list>
      <div class="lastadd"> </div>

      <Tab-Bar :logeid="num"></Tab-Bar>
    </div>
  </van-pull-refresh>
</template>

<script>
import TabBar from "./TabBar.vue";
import https from "./https.js";
//引入封装好的js方法
import { _debounce, _throttle } from "./untils.js";

//引入其他子组件
export default {
  components: {
    TabBar
  },
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      count: 0,
      isLoading: false,
      index: 0,
      bannerimages: [
        // { id: 0, imgSrc: require("../assets/images/a16.jpg") },
        // { id: 1, imgSrc: require("../assets/images/a18.jpg") }
      ],
      listimages: [
        // {
        //   id: 0,
        //   Name: "认养",
        //   imgSrc: require("../assets/images/a1.png"),
        //   link: "/Foster"
        // },
        // {
        //   id: 1,
        //   Name: "认购",
        //   imgSrc: require("../assets/images/a2.png"),
        //   link: "/Store"
        // },
        // {
        //   id: 2,
        //   Name: "直播",
        //   imgSrc: require("../assets/images/a3.png"),
        //   link: "/Live"
        // },
        // {
        //   id: 3,
        //   Name: "商城",
        //   imgSrc: require("../assets/images/a4.png"),
        //   link: " "
        // },
        // {
        //   id: 4,
        //   Name: "火腿师",
        //   imgSrc: require("../assets/images/a5.png"),
        //   link: "/HamPeople"
        // }
      ],
      middleimages: [
        // { id: 0, imgSrc: require("../assets/images/a7.png") }
      ],
      Piglist: [
        // {
        //   id: 0,
        //   Pig: "乌金猪",
        //   Date: "第1期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5100.00",
        //   Month: "8",
        //   Schedule: 74,
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // },
        // {
        //   id: 1,
        //   Pig: "乌金猪",
        //   Date: "第2期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5000.00",
        //   Month: "8",
        //   Schedule: 100,
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // },
        // {
        //   id: 3,
        //   Pig: "乌金猪",
        //   Date: "第2期",
        //   Way: "认养",
        //   Percentage: "36.00%",
        //   Money: "5000.00",
        //   Month: "8",
        //   Schedule: "99",
        //   imgSrc: require("../assets/images/a11.jpg"),
        //   imgSrcover: require("../assets/images/a13.png")
        // }
      ],
      loading: false,
      finished: false,
      num: 0
    };
  },

  mounted() {
    // 上拉加载
    window.addEventListener("scroll", this.onScroll);
  },

  // created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
  created() {
    //数据请求第一原则:绞尽脑汁进行一次请求完毕
    //*********模拟本地接口  simulation
    //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
    let params = {
      product_one_cate: "13493121"
    };
    this.MockRequestApi(
      "api/pigList",
      "",
      this.bannerimages,
      this.listimages,
      this.middleimages,
      this.Piglist,
      ""
    );

    //******下面是真实接口
    //banner图******

    //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
    //this.RequestApi("api/bblist", "", this.bannerimages, Urlimg);
    // 商城list******
    //let params = {
    // product_one_cate: "13493121"
    //};
    //购买list
    //let params2 = {
    //   limit: "10",
    //   page: "1",
    //   cate_code: "13761837",
    //   title: ""
    // };
    // this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);
  },

  methods: {
    //vant 的轮播图 间隔时间和图片id
    play() {
      // eslint-disable-next-line semi
      setInterval(this.autoPlay, 2500);
    },
    onChange(index) {
      this.current = index;
    },

    //上拉加载
    onRefresh() {
      this.RefreshBtn("加载中...", 2000);

      (this.bannerimages = []),
        (this.listimages = []),
        (this.middleimages = []),
        (this.Piglist = []);
      //*********模拟本地接口  simulation
      //let Urlimg = "http://yyl.kmmyxb.cn/pic/";
      let params = {
        product_one_cate: "13493121"
      };

      setTimeout(() => {
        // this.$toast("刷新成功");
        this.isLoading = false;
        this.count++;

        this.MockRequestApi(
          "api/pigList",
          "",
          this.bannerimages,
          this.listimages,
          this.middleimages,
          this.Piglist,
          ""
        );
        //this.goods();
      }, 500);
    },

    //MockRequestApi  模拟数据接口
    MockRequestApi(
      Url,
      Params,
      bannerimagesName,
      listimagesName,
      middleimagesName,
      PiglistName,
      Urlimg
    ) {
      https
        .fetchGet(Url, Params)
        .then(res => {
          //console.log(res);
          let newData = res.data.data;
          switch (newData.code) {
            case 1001:
              console.log("查询成功!");
              console.log(newData.result);

              for (let i = 0; i < newData.result.length; i++) {
                console.log(newData.result[0]);
                if (i == 0) {
                  for (
                    let j = 0;
                    j < newData.result[i].bannerimages.length;
                    j++
                  ) {
                    let bannerimages = newData.result[i].bannerimages;
                    bannerimagesName.push({
                      id: bannerimages[j].id,

                      imgSrc: require("../assets/images/" +
                        bannerimages[j].imgSrc +
                        ".jpg")
                    });
                  }
                } else if (i == 1) {
                  //console.log(listimagesName);
                  for (
                    let j = 0;
                    j < newData.result[i].listimages.length;
                    j++
                  ) {
                    let listimages = newData.result[i].listimages;
                    listimagesName.push({
                      id: listimages[j].id,
                      Name: listimages[j].Name,
                      imgSrc: require("../assets/images/" +
                        listimages[j].imgSrc +
                        ".png"),
                      link: listimages[j].link
                    });
                  }
                  //console.log(listimagesName);
                } else if (i == 2) {
                  for (
                    let j = 0;
                    j < newData.result[i].middleimages.length;
                    j++
                  ) {
                    let middleimages = newData.result[i].middleimages;
                    middleimagesName.push({
                      id: middleimages[j].id,
                      imgSrc: require("../assets/images/" +
                        middleimages[j].imgSrc +
                        ".png")
                    });
                  }
                } else if (i == 3) {
                  for (let j = 0; j < newData.result[i].Piglist.length; j++) {
                    let Piglist = newData.result[i].Piglist;
                    PiglistName.push({
                      id: Piglist[j].id,
                      Pig: Piglist[j].Pig,
                      Date: Piglist[j].Date,
                      Way: Piglist[j].Way,
                      Percentage: Piglist[j].Percentage,
                      Money: Piglist[j].Money,
                      Month: Piglist[j].Month,
                      Schedule: Piglist[j].Schedule,
                      imgSrc: require("../assets/images/" +
                        Piglist[j].imgSrc +
                        ".jpg"),
                      imgSrcover: require("../assets/images/" +
                        Piglist[j].imgSrcover +
                        ".png")
                    });
                  }
                }
              }
              console.log(this.Piglist);
              break;
            case 1002:
              console.log("查询失败1!");
              break;
            default:
              console.log("错误1!");
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //请求数据接口封装
    RequestApi(Url, Params, Name, Urlimg) {
      https
        .fetchGet(Url, Params)
        .then(res => {
          console.log(res.data.code);
          let newData = res.data;

          switch (newData.code) {
            case 1001:
              console.log("查询成功!");
              switch (newData.result) {
                case newData.result:
                  console.log("数据存在!");

                  if (Name == this.bannerimages) {
                    for (let i = 0; i < newData.result.length; i++) {
                      console.log(newData.result[i].b_id);
                      Name.push({
                        id: newData.result[i].b_id,
                        //  src="http://yyl.kmmyxb.cn/pic/f8ea982e79bb5fc92685a84b3bc8fa74.jpg"
                        imgSrc: Urlimg + newData.result[i].pic
                      });
                      console.log(this.bannerimages);
                    }
                  } else {
                    for (let i = 0; i < newData.result.data.length; i++) {
                      this.Piglist.push({
                        id: 0,
                        Pig: newData.result.data[0].title,
                        Date: "第" + newData.result.data[0].num_per + "期",
                        Way: newData.result.data[0].unit,
                        Percentage:
                          newData.result.data[0].forecast_year_bonus + "%",
                        Money: newData.result.data[0].price,
                        Month: newData.result.data[0].term,
                        imgSrc: Urlimg + newData.result.data[0].picture,
                        more_picture:
                          Urlimg + newData.result.data[0].more_picture,
                        Schedule: 96,

                        cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
                        product_bonus_bl: newData.result.data[0].title,
                        cash_product_bonus_bl:
                          newData.result.data[0].cash_product_bonus_bl,
                        stock: newData.result.data[0].stock,
                        unit: newData.result.data[0].unit,
                        bonus_type: newData.result.data[0].bonus_type
                      });
                      this.Piglist.push({
                        id: 0,
                        Pig: newData.result.data[0].title,
                        Date: "第" + newData.result.data[0].num_per + "期",
                        Way: newData.result.data[0].unit,
                        Percentage:
                          newData.result.data[0].forecast_year_bonus + "%",
                        Money: newData.result.data[0].price,
                        Month: newData.result.data[0].term,
                        imgSrc: Urlimg + newData.result.data[0].picture,
                        more_picture:
                          Urlimg + newData.result.data[0].more_picture,
                        Schedule: 96,

                        cash_bonus_bl: newData.result.data[0].cash_bonus_bl,
                        product_bonus_bl: newData.result.data[0].title,
                        cash_product_bonus_bl:
                          newData.result.data[0].cash_product_bonus_bl,
                        stock: newData.result.data[0].stock,
                        unit: newData.result.data[0].unit,
                        bonus_type: newData.result.data[0].bonus_type
                      });
                    }
                    console.log(this.Piglist);
                  }

                  break;
                default:
                  console.log("错误!");
                  break;
              }
              break;
            case 1002:
              console.log("查询失败1!");
              break;
            default:
              console.log("错误1!");
              break;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    //获取商品接口 上拉加载
    //
    goods: _throttle(function() {
      this.bannerimages.length = 0;
      this.Piglist.length = 0;

      let Urlimg = "http://yyl.kmmyxb.cn/pic/";
      this.RequestApi("api/bblist", "", this.bannerimages, Urlimg);
      // 商城list******
      let params = {
        product_one_cate: "13493121"
      };

      //购买list
      let params2 = {
        limit: "10",
        page: "1",
        cate_code: "13761837",
        title: ""
      };
      this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);
    }, 200),

    //判定上滑刷新方法
    onScroll() {
      //可滚动容器的高度
      this.LastTime();
    },

    //弹出提示
    showToast(id, link) {
      if (id == 3) {
        this.$toast({
          message: "此功能等待后续开放"
        });
      } else {
        this.$router.push({ path: link });
      }
    },

    //跳转本期售出详情
    showDetails(id) {
      if (id == 0) {
        this.$router.push({ path: "/PigDetails" });
      }
    },

    //刷新按钮
    RefreshBtn(title, time) {
      this.$toast.loading({
        message: title,
        duration: time
      });
    },

    //vant 加载列表方法
    onLoad() {
      // 异步更新数据
      this.RefreshBtn("加载中...", 2000);
      setTimeout(() => {
        for (let i = 0; i < 1; i++) {
          // this.Piglist.push(this.Piglist.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.Piglist.length > 0) {
          this.finished = true;
        }
      }, 500);
    },

    //函数防抖 （只执最后一次点击）多用于频繁点击
    LastTime: _debounce(function() {
      let innerHeight = this.$refs.scroll.clientHeight;

      //屏幕尺寸高度
      let outerHeight = document.documentElement.clientHeight;
      //可滚动容器超出当前窗口显示范围的高度
      let scrollTop = document.documentElement.scrollTop;
      //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
      //console.log(innerHeight + " " + outerHeight + " " + scrollTop);
      if (innerHeight <= outerHeight + scrollTop) {
        //加载更多操作
        let params2 = {
          limit: "10",
          page: "1",
          cate_code: "13761837",
          title: ""
        };
        let Urlimg = "http://yyl.kmmyxb.cn/pic/";

        this.Piglist.length = 0;
        console.log(this.Piglist);
        this.RequestApi("api/getproductlist", params2, this.Piglist, Urlimg);

        if (this.Piglist.length > 0) {
          this.finished = true;
        }
      }
    }, 200)
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* //自定义.css的样式路径 */
/* @import "../css/HomePage.css"; */

* {
  padding: 0;
  margin: 0;
}
body {
  background-color: #f6f6f6;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  display: block;
  cursor: pointer;
}
div {
  display: block;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 100%;
}
.hello-1 {
  width: 100%;
  height: 150px;
  padding: 0 2.6%;
  background-color: #ffffff;
  margin-top: 10px;
}
.hello-1 img {
  width: 99%;
  height: 150px;
  border-radius: 10px;
  pointer-events: none;
}
.van-swipe {
  width: 100%;
  height: 100%;
}

.hello-2 {
  width: 100%;
  height: 107.02px;
  padding-left: 5px;
  background: #fff;
  display: flex;
  flex-flow: row wrap;
}
.hell0-1 {
  width: 0%;
  height: 107.02px;
  padding-left: 5px;
}

.hello-2-1 {
  flex-basis: 20%;
  /* width: 70px; */
  height: 107px;
  padding: 16px 8px;
  display: flex;
  flex-flow: row wrap;
  padding-right: 5px;
}

.hello-2-one {
  width: 53.03px;
  height: 53.03px;
  display: flex;
  flex-flow: row wrap;
}

.hello-2-two {
  width: 53.03px;
  font-size: 15px;
  height: auto;
  text-align: center;
  color: #333;
  padding-top: 2px;
  font-size: 15px;
}

.hello-3 {
  width: 100%;
  height: 100.34px;
  padding: 0 3%;
  background: #ffffff;
}
.help-son {
  padding: 10px 10px 0 10px;
}
.hello-4 {
  height: 181.25px;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 10px;
}
.hello-4-top {
  padding-top: 10px;
  padding-left: 10px;
  width: 100%;
  height: 80px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 3%;
}

.hello-4-top-left {
  width: 58px;
  height: 58px;
}
.hello-4-top-left img {
  width: 58px;
  height: 58px;
}

.hello-4-top-right {
  width: 106.69px;
  height: 60px;
  text-align: left;
  padding-left: 12px;
}

.hello-4-top-last {
  width: 58px;
  height: 58px;
  margin-left: 105px;
}
.hello-4-top-last img {
  width: 58px;
  height: 58px;
}

.pig {
  width: 100%;
  font-size: 16px;
  color: #333;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secend {
  display: flex;
  padding-top: 10px;
}
.date {
  width: 36.69px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  background-color: rgb(233, 92, 111);
  color: #fff;
  margin-right: 10px;
}
.date-gray {
  width: 36.69px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  background-color: rgb(233, 92, 111);
  color: gray;
  margin-right: 10px;
}
.recive {
  width: 30px;
  height: 20px;
  text-align: center;
  padding-left: 5px;
  margin-right: 10px;
  color: #fff;
  background-color: #fff;
}

.hello-4-bottom {
  width: 100%;
  padding: 3%;
}
.show-one {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
h4 {
  color: #e95c6f;
  font-size: 18px;
}
.color-2 {
  color: #8a8a8a;
}
.adddistance {
  text-align: center;
  width: 100%;
}
.show-one-1 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  text-align: left;
}
.show-one-2 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  justify-content: flex-start;
}
.show-one-3 {
  width: 33.33%;
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  padding-left: 65px;
  justify-content: flex-start;
}
h4 {
  color: #e95c6f;
  font-size: 16px;
  margin-bottom: 5px;
  clear: both;
  width: 100%;
  display: block;
  font-weight: bold;
}

.length {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.hello-5 {
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  margin: auto;
  background: #fff;
}
.hello-5-all {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.hello-5-bottom {
  width: 20%;
  display: flex;
}

.Size {
  width: 25.984px;
  height: 25.984px;
}
.lastadd {
  width: 100%;
  height: 60px;
}

.gray {
  color: gray;
  filter: grayscale(100%);
  opacity: 0.5;
}
.onlygray {
  color: gray;
}
.close {
  display: none;
}
</style>

<style scoped>
.slide {
  width: 950px;
  height: 150px;
  margin: 0 auto;
  margin-top: 50px;
  overflow: hidden;
  position: relative;
}
.slideshow {
  width: 100%;
  height: 100%;
}
li {
  position: absolute;
}
.bar {
  position: absolute;
  width: 100%;
  top: 150px;
  margin: 0 auto;
  z-index: 10;
  text-align: center;
}
.bar span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  display: inline-block;
  margin-right: 10px;
}
.active {
  background: #bfd6b6 !important;
}
</style>
